<script setup lang='ts'>
import Coma1 from './components/Coma1.vue'
import Coma2 from './components/Coma2.vue'
import Coma3 from './components/Coma3.vue'

const { data } = useRequest(() => apiCategoriesDetailReq({ id: '1' }))

// 公共的id
const id = ref('')
setTimeout(() => {
  id.value = '1'
}, 1000)
</script>

<template>
  <Container title="如何写组件">
    <h3>复用性组件</h3>
    <Tag text="成功" type="yellow" />
    <hr>
    <h3>隔离性组件</h3>
    {{ data }}
    <div m10 h100 w100 bg-red color-white>
      {{ data?.name }}
    </div>
    <div m10 h100 w100 bg-red color-white>
      {{ data?.description }}
    </div>
    <div m10 h100 w100 bg-red color-white>
      {{ data?.createdAt }}
    </div>
    <hr>
    <Coma1 :id="id" />
    <Coma2 :id />
    <Coma3 :id />
  </Container>
</template>

<style lang='less' scoped>

</style>
